
@import './reset'
@import './animation'
@import './var'
// @import './var-sc'
@import './project'

html, body
  height 100%
  width 100%
body
  color #666
  font-size 14px
  font-family "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif
  --themeColor $theme
.danger
  color $danger !important

.theme, .primary
  color $theme !important

.warning
  color $warning !important

.info
  color $info !important

.success
  color $success !important

.page-bg
  background-color $page-bg !important

.page-content
  background-color $page-content !important

.page-dark
  background-color $page-dark !important

// 字号
.fs-s
  font-size $fs-s // 10px // small

.fs-n
  font-size $fs-n // 12px // normal 默认全局12px

.fs-m
  font-size $fs-m // 14px // middle

.fs-b
  font-size $fs-b // 16px // big

.fs-l
  font-size $fs-l // 18px // large

.fs-xl
  font-size $fs-xl // 26px // extra large

.fs-xxl
  font-size $fs-xxl // 30px //extra extra large

// 字体颜色
// black
.fc-b0
  color #000 // dark = #000
.fc-b1
  color $fc-b1 // dark = #333

.fc-b2
  color $fc-b2 // middle = #666

.fc-b3
  color $fc-b3 // light = #999

// white
.fc-w1
  color $fc-w1 // dark = #bbb

.fc-w2
  color $fc-w2 // middle = #ddd

.fc-w3
  color $fc-w3 // light = #fff

// border
$border-directions = {
  t: top,
  r: right,
  b: bottom,
  l: left
}

.border
  border 1px solid $border

.border-w
  border 1px solid $border-w

for dKey, dVal in $border-directions
  .bd-{dKey}
    border-{dVal} 1px solid $border

for dKey, dVal in $border-directions
  .bd-{dKey}-w
    border-{dVal} 1px solid $border-w

.border-bottom
  border-bottom 1px solid $border

// flex
.flex
  display flex

.flex-auto
  flex 0 0 auto

.flex-1
  flex 1 1 0%

.flex-center
  display flex !important
  justify-content center
  align-items center

$flex-direction = {
  r: row,
  rr: row-reverse,
  c: column,
  cr: column-reverse
}
$flex-wrap = {
  w: wrap,
  n: nowrap
}

// .ff-rn  flex-flow row nowarp .ff-crn
for dkey, dvalue in $flex-direction
  for wkey, wvalue in $flex-wrap
    .ff-{dkey}{wkey}
      display flex
      flex-flow dvalue wvalue

$flex-percent = 2...8

for value, key in $flex-percent
  $percent = (100 / value) + '%'

  .flex-{key + 2}
    flex 0 0 $percent
    width 0

$flex-jc = {
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around
}

// jc-center
for key, value in $flex-jc
  .jc-{key}
    display flex
    justify-content value

$flex-ai = {
  start: flex-start,
  end: flex-end,
  center: center,
  stretch: stretch
}

// ai-center
for key, value in $flex-ai
  .ai-{key}
    display flex
    align-items value

// spacing
$spacing-types = {
  mg: margin,
  pd: padding
}
$spacing-directions = {
  t: top,
  r: right,
  b: bottom,
  l: left
}
$spacing-sizes = 0 0.5 1 1.5 2 3

// mg1 pd1 mgx1 pdy1
for tKey, tVal in $spacing-types
  for spacingVal, spacingKey in $spacing-sizes
    .{tKey}{spacingKey}
      if (spacingKey)
        {tVal} spacingVal * 12px
      else
        {tVal} spacingVal * 12px !important
    .{tKey}x{spacingKey}
      {tVal} 0 spacingVal * 12px
    .{tKey}y{spacingKey}
      {tVal} spacingVal * 12px 0

// mgt1 pdt1
for tKey, tVal in $spacing-types
  for dKey, dVal in $spacing-directions
    for spacingVal, spacingKey in $spacing-sizes
      .{tKey}{dKey}{spacingKey}
        {tVal}-{dVal} spacingVal * 12px !important

// line-height
// .lh
for val, key in 1 1.5 2 2.5 3
  .lh{key + 1}
    line-height val * 12px !important

.scroll-y
  display flex
  flex-direction column

  scroll('y')

.scroll-x
  display flex

  scroll('x')

// omit-2...
$omit = ''
$line = 1 2 3 4 5 6

for num in $line
  $omit += '.omit-' + num + ','

{$omit}
  display -webkit-box
  overflow hidden
  word-break break-all
  /* autoprefixer: ignore next */
  -webkit-box-orient vertical

for num in $line
  .omit-{num}
    -webkit-line-clamp num

// 公共类
.line-through
  text-decoration line-through

.clearfix
  *zoom 1
  clear both

.clearfixbefore, .clearfixafter
  content ' '
  display block
  height 0
  clear both
  visibility hidden

.inline-block
  display inline-block

.overflow-hidden
  overflow hidden

.fl
  float left

.fr
  float right

.hide
  display none

.hand
  cursor pointer

.omit
  overflow hidden
  text-overflow ellipsis
  white-space nowrap
  word-break break-all

.flex-omit-x
  width 0
  flex 1

  @extend .omit

.flex-omit-y
  height 0
  flex 1

  @extend .omit

.tal
  text-align left

.tac
  text-align center

.margin-auto
  margin auto

.margin-xauto
  margin 0 auto

.margin-yauto
  margin auto 0

.tar
  text-align right

.pf
  position fixed

.pr
  position relative !important

.pa
  position absolute !important

.pac
  position absolute !important
  left 50%
  top 50%
  transform translate(-50%, -50%)

.select-none
  user-select none

.pre
  white-space pre-wrap

.full
  height 100%
  width 100%

.round
  border-radius 50%

.strong
  font-weight 600

.hover
  hover()

.hover-success
  hover($success)

.hover-danger
  hover($danger)

.hover-bg-theme
  hover(#fff, $theme)

.hover-bg-danger
  hover(#fff, $danger)

.hover-scale
  transition all 0.1s
  &:hover
    box-shadow 2px 2px 10px 0 rgba(133, 133, 133, 0.15)

.line
  position relative
  &::after
    content ''
    position absolute
    width 100px
    height 1px
    background-color #bbb
    left -120px
    top 50%
  &::before
    content ''
    position absolute
    width 100px
    height 1px
    background-color #bbb
    right -120px
    top 50%

.list-style-none
  list-style none

.list-style-disc
  list-style disc

.list-style-circle
  list-style circle

.list-style-decimal
  list-style decimal

.scroll-smooth
  scroll-behavior smooth

@import './var'

.danger
  color $danger

.warning
  color $warning

.theme
  color $theme

.success
  color $success

.fc-main
  color #666

.fc-sub
  color #999

.type-title
  height 50px
  line-height 50px
  border-bottom 1px dashed #e6e7ec
  font-size 18px
  color #353535
  padding-left 30px
  margin-bottom 20px

.a
  color $blue
  display inline-block
  cursor pointer

.el-tabs
  &.el-tabs--border-card
    box-shadow none !important
    border none !important
  .el-tabs__item
    text-align center
    position relative
    &.is-active
      min-width 140px
    &:hover
      .el-icon-edit, .el-icon-close
        display inline-block
    .el-input
      width 100px
    .el-icon-edit, .el-icon-close
      position absolute
      top 51%
      transform translateY(-50%)
    .el-icon-edit
      left 2px
      display none
      border-radius 50%
      padding 1px
      transition all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)
      &:hover
        color #fff
        background-color $success
    .el-icon-close
      right 2px
      display none
      padding 1px
      &:hover
        background-color $danger
  .el-tabs__content
    min-height calc(100vh - 89px - 80px)
    padding-bottom 20px
  .el-tabs__header
    min-height 39px

.red
  color $danger !important

.green
  color $success !important

.warning
  color $warning !important

.wrapper
  margin 0 15px

// breadcrumb animate
.slide-fade-enter-active
  transition all 0.3s 0.3s ease

.slide-fade-leave-active
  transition all 0.3s ease

.slide-fade-enter, .slide-fade-leave-to
  transform translateX(10px)
  opacity 0

// fade-transform
.fade-transform-leave-active, .fade-transform-enter-active
  transition all 0.2s

.fade-transform-enter
  transform translateX(-30px)
  opacity 0

.fade-transform-leave-to
  opacity 0
  transform translateX(30px)

// 覆盖element-ui hover 菜单样式
.el-menu--popup
  .router-link-active
    &>.el-menu-item
      color $blue !important
      background-color rgb(38, 46, 62) !important
      i
        color $blue !important
  .el-menu-item
    color rgb(191, 203, 217) !important
    i
      color rgb(191, 203, 217) !important
      margin-right 10px

.el-submenu__title
  padding 0 10px
  i.iconfont
    margin 0 5px !important
    color #bfcbd9
  span
    color #bfcbd9

// 翻页
.el-pagination
  margin-top 20px
  display inline-block

.el-dialog, .el-dialog.el-dialog--center
  .el-dialog__header
    // background-color #f0f3f4
  .el-dialog__body
    padding 0
  .el-dialog__footer
    padding 10px
    height 60px
    box-sizing border-box
    background #f0f3f4
    .dialog-footer
      line-height 40px
      height 100%
      .el-pagination
        height 35px
        margin-top 10px

.dialog-content
  height 420px
  overflow-y auto
  box-sizing border-box
  .menu
    height 40px
    margin-left -20px
    margin-right -20px
    border-top 1px solid #ddd
    border-bottom 1px solid #ddd
    background-color #f0f3f4
    .menu-list
      & > li, .menu-list-item
        display inline-block
        padding 0 15px
        line-height 40px
        font-size 12px
        cursor pointer
        &.active
          background-color #fff
          height 41px

// 表头颜色
.el-table
  border 1px solid #eee
  tr
    th
      background-color $table-head

// 表头搜索等
.tab-options
  line-height 40px
  padding 0 10px
  color #999
  background-color $table-head
  border-bottom 1px solid #fff
  &>div
    display inline-block
  .el-button
    margin-right 10px
  .label
    display inline-block
    margin-right 10px
  .item
    &>*
      margin-right 10px
    .el-select
      width 150px
      .el-input
        width 100%
    .el-input
      width auto

// 订单详情对话框
.detail-dialog
  .order-info
    display flex
    flex-wrap wrap
    background-color rgba($table-head, 0.41)
    .item
      width 50%
      display flex
      padding 0 10px
      border-bottom 1px solid #ddd
      line-height 40px
      img
        width 40px
        height 40px
        margin 2px 0
      .label
        font-weight 700
        margin-right 10px
        width 90px
        display inline-block
        text-align right
  .goods-name
    display flex
    align-items center
    img
      width 40px
      height 40px
      margin-right 10px

// 无数据
.null
  margin-top 50px
  margin-bottom 50px
  font-size 16px
  color #999
// 最小高度
.min-h300
  min-height 300px
.min-h600
  min-height 600px
.min-h900
  min-height 900px
.min-h1200
  min-height 1200px
.full-bg
  width 100%
  height 100%
  background-color #eee

// 饿了么输入框默认宽度
.router-view
  .el-input
    width auto
    .el-input__suffix, .el-input__suffix-inner
      display flex
      align-items center
      .amount
        display inline-block
        background-color #fff
        height 30px
        line-height 30px
  .el-textarea
    width 300px

.el-upload
  .el-icon-plus
    color #888 !important
    text-shadow 0 0 10px rgba(#fff, 0.8)
  .el-upload-dragger
    .el-upload__text
      font-size 16px

.hover-scale
  transition all 0.1s
  &:hover
    transform scale(1.02)
    box-shadow 0 2px 10px 0 rgba(30, 13, 4, 0.15)

.el-date-editor .el-range-separator
  padding 0 !important

.upload-common
  width 160px
  display inline-block
  height @width
  border 1px dashed #999
  border-radius 10px
  position relative
  overflow hidden
  cursor pointer
  .el-upload
    width 100%
    height 100%
    display flex
  &:hover
    .el-icon-plus.hover-show
      opacity 0.5
  img
    height 100%
    width 100%
  .el-icon-plus
    font-size 60px
    &.hover-show
      opacity 0

.el-tooltip__popper
  max-width 400px

.el-message
  z-index 9999 !important

.el-pagination__editor.el-input
  width 50px

.page-dark {
  background-color: #e6f6ff !important;
}

.mgl5 {
  margin-left: 5px !important;
}
.mgl2 {
  margin-left: 12px !important;
}
.mgr5 {
  margin-right: 5px !important;
}
.mgt2 {
  margin-top: 12px !important;
}
.mgt3 {
  margin-top: 25px !important;
}
.mgt5 {
  margin-top: 5px !important;
}
.mgb2 {
  margin-bottom: 12px!important;
}
.mgb5 {
  margin-bottom: 5px !important;
}
.pd2 {
  padding: 12px;
}
.pdt2 {
  padding-top: 12px!important;
}
.pdx2 {
  padding: 0 12px;
}
.pdy2 {
  padding: 12px 0;
}
.lh4 {
  line-height: 30px!important;
}
// 重置ele样式
.el-tabs {
  .el-tabs__item.is-active {
    min-width: 20px;
  }
}